<template>
    <div class="box">
<img src="../assets/images/chart/touxiang.jpg" alt="">
        <i class="iconfont">&#xe600;</i>
        <i class="iconfont">&#xe6c2;</i>
        <i class="iconfont shoucang" >&#xe629;</i>
        <i class="iconfont">&#xeac6;</i>
        <i class="iconfont">&#xe601;</i>
        <i class="iconfont">&#xe63a;</i>
        <i class="iconfont bottom">&#xe619;</i>
        <i class="iconfont bottom">&#xe602;</i>
        <i class="iconfont bottom">&#xe61f;</i>
    </div>
</template>

<script setup>
import { onMounted, defineEmits } from 'vue';
const emits = defineEmits(['component-ready']);
onMounted(() => {
    emits('component-ready', '子组件已准备好');
});
</script>

<style scoped lang="scss">
.box {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 100%;
    background-color: black;
   margin-left: 0px;
   margin-top: 0px;
    .iconfont {
        position: relative;
        top: 110px;
        color: #929292;
        font-size: 30px; 
        margin-top: 30px;
        transform: translateX(30%);
    }
    .iconfont.bottom {
       
        margin-top: 30px;
       top: 320px;
    }
    .iconfont.shoucang{
        font-size: 28px;
        left: -4px;
    }
    img{
        width: 55px;
        position: absolute;
        top: 40px;
        left: 20px;
    }
}
</style>